import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';
import 'package:image_picker/image_picker.dart';
import 'package:travel/screen/flutter_screenutil.dart';
import 'package:travel/utils/colors.dart';
import 'package:travel/utils/radian.dart';
import 'package:travel/utils/styles.dart';
import 'package:travel/utils/tools.dart';

class FeedbackController extends GetxController {
  RxInt tabIndex = 0.obs;

  RxList<String> tabs = RxList(['功能体验', '商品相关', '其他']);

  RxString content = ''.obs;

  RxString mobile = ''.obs;

  RxList<XFile> imgs = RxList([]);
}

class FeedbackView extends GetView<FeedbackController> {
  const FeedbackView({super.key});

  @override
  Widget build(BuildContext context) {
    return Obx(() => Scaffold(
          backgroundColor: ColorsUtils.parseColorFromHexString(ColorsUtils.colorF7f7),
          appBar: AppBar(
            automaticallyImplyLeading: true,
            leading: InkWell(
              onTap: Get.back,
              child: Icon(
                Icons.arrow_back_ios,
                color: ColorsUtils.parseColorFromHexString(ColorsUtils.color3333),
                size: 20.w,
              ),
            ),
            leadingWidth: 40.w,
            title: Text(
              '意见反馈',
              style: StylesUtils.customTextStyle(
                  color: ColorsUtils.color3333, fontSize: 18.sp, fontWeight: FontWeight.bold),
            ),
          ),
          body: SingleChildScrollView(
            padding: EdgeInsets.all(20.w),
            child: Column(
              children: [
                Container(
                  padding: EdgeInsets.all(10.w),
                  decoration:
                      BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(15.w)),
                  child: ListBody(
                    children: [
                      Container(
                        alignment: Alignment.centerLeft,
                        padding: EdgeInsets.only(bottom: 15.h),
                        child: Text(
                          '意见类型',
                          style: StylesUtils.customTextStyle(
                              fontSize: 15.sp, color: ColorsUtils.color3333),
                        ),
                      ),
                      Container(
                        alignment: Alignment.centerLeft,
                        child: Wrap(
                            spacing: 5.w,
                            children: controller.tabs
                                .asMap()
                                .map((index, name) => MapEntry(
                                    index,
                                    Container(
                                      constraints: BoxConstraints.expand(width: 97.w, height: 35.h),
                                      alignment: Alignment.center,
                                      decoration: BoxDecoration(
                                          color: activeColor(index),
                                          border: activeBorder(index),
                                          borderRadius: activeBorderRadius(index)),
                                      child: TextButton(
                                          onPressed: () {
                                            controller.tabIndex.value = index;
                                          },
                                          style: ButtonStyle(
                                            overlayColor: MaterialStateColor.resolveWith(
                                                (states) => Colors.transparent),
                                          ),
                                          child: Text(
                                            name,
                                            style: StylesUtils.customTextStyle(
                                                color: ColorsUtils.color3333, fontSize: 13.sp),
                                          )),
                                    )))
                                .values
                                .toList()),
                      ),
                      Container(
                        padding: EdgeInsets.all(10.w),
                        child: Container(
                            decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(6.w),
                                color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorFafa)),
                            alignment: Alignment.centerLeft,
                            child: TextField(
                              controller: ToolsUtils.editingController(controller.content.value),
                              cursorWidth: 2.0,
                              cursorRadius: const Radius.circular(2),
                              cursorHeight: 10,
                              cursorColor:
                                  ColorsUtils.parseColorFromHexString(ColorsUtils.color3333),
                              style: StylesUtils.customTextStyle(
                                  fontSize: 15.sp, color: ColorsUtils.color3333),
                              keyboardType: TextInputType.multiline,
                              maxLength: 500,
                              maxLengthEnforcement: MaxLengthEnforcement.enforced,
                              autofocus: false,
                              maxLines: 20,
                              minLines: 10,
                              textAlign: TextAlign.left,
                              textInputAction: TextInputAction.none,
                              decoration: InputDecoration(
                                border: InputBorder.none,
                                focusedBorder: InputBorder.none,
                                hintText: '请输入问题或者建议，我们收到通知后会及时跟进...',
                                contentPadding: EdgeInsets.symmetric(vertical: 10.h, horizontal: 15.w),
                                hintStyle: StylesUtils.customTextStyle(
                                  color: ColorsUtils.color9999,
                                ),
                                isDense: false,
                                isCollapsed: false,
                              ),
                              buildCounter: (
                                BuildContext context, {
                                required int currentLength,
                                required int? maxLength,
                                required bool isFocused,
                              }) {
                                return Padding(padding: EdgeInsets.only(bottom: 10.h,), child: Row(
                                  mainAxisAlignment: MainAxisAlignment.end,
                                  children: <Widget>[
                                    Text(
                                      '$currentLength',
                                      style: StylesUtils.customTextStyle(
                                          color: ColorsUtils.colorD900, fontSize: 12.sp),
                                    ),
                                    Text(
                                      '/$maxLength字',
                                      style: StylesUtils.customTextStyle(
                                          color: ColorsUtils.color9999, fontSize: 12.sp),
                                    ),
                                  ],
                                ),);
                              },
                              onChanged: (String keyword) {
                                controller.content.value = keyword;
                              },
                            )),
                      ),
                      Container(
                        padding: EdgeInsets.only(top: 15.h),
                        alignment: Alignment.centerLeft,
                        child: Wrap(
                          spacing: 5.w,
                          runSpacing: 10.w,
                          children: [
                            ...controller.imgs.map((file) => Stack(
                                  children: [
                                    Container(
                                      constraints: BoxConstraints.expand(width: 80.w, height: 80.w),
                                      decoration: BoxDecoration(
                                          image: DecorationImage(
                                              image: FileImage(File(file.path)),
                                              alignment: Alignment.topLeft)),
                                    ),
                                    Positioned(
                                        top: 5.w,
                                        right: 10.w,
                                        width: 15.w,
                                        height: 15.w,
                                        child: InkWell(
                                          onTap: () {
                                            controller.imgs.remove(file);
                                          },
                                          child: CircleAvatar(
                                            radius: 7.5.w,
                                            backgroundColor: ColorsUtils.rgba(0, 0, 0, 0.34902),
                                            child: Text(
                                              '×',
                                              style: StylesUtils.customTextStyle(
                                                  color: ColorsUtils.colorFfff),
                                            ),
                                          ),
                                        ))
                                  ],
                                )),
                            InkWell(
                              onTap: () async {
                                if (controller.imgs.length < 4) {
                                  List<XFile> files = await ToolsUtils.loadGalleryImage();
                                  if (files.length + controller.imgs.length < 4) {
                                    controller.imgs.addAll(files);
                                  }
                                }
                              },
                              child: SizedBox(
                                width: 80.w,
                                height: 80.w,
                                child: Column(
                                  children: [
                                    Expanded(
                                        flex: 3,
                                        child: Center(
                                          child: Text(
                                            '+',
                                            style: StylesUtils.customTextStyle(
                                                fontSize: 28.sp, color: ColorsUtils.colorCccc),
                                          ),
                                        )),
                                    Expanded(
                                        flex: 2,
                                        child: Center(
                                          child: Text(
                                            '图片(${controller.imgs.length}/4)',
                                            style: StylesUtils.customTextStyle(
                                                fontSize: 13.sp, color: ColorsUtils.colorCccc),
                                          ),
                                        ))
                                  ],
                                ),
                              ),
                            )
                          ],
                        ),
                      )
                    ],
                  ),
                ),
                Container(
                  margin: EdgeInsets.only(top: 20.h),
                  height: 50.h,
                  padding: EdgeInsets.symmetric(horizontal: 15.w),
                  decoration:
                      BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(10.w)),
                  child: Row(
                    children: [
                      Text.rich(TextSpan(children: [
                        TextSpan(
                          text: '联系方式：   ',
                          style: StylesUtils.customTextStyle(
                              color: ColorsUtils.color0000, fontSize: 15.sp),
                        ),
                        TextSpan(
                            text: '+86',
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.color3333, fontSize: 16.sp))
                      ])),
                      Expanded(
                          child: Container(
                        padding: EdgeInsets.only(left: 10.w),
                        alignment: Alignment.centerLeft,
                        child: TextField(
                          controller: ToolsUtils.editingController(controller.mobile.value),
                          cursorWidth: 2.0,
                          cursorRadius: const Radius.circular(2),
                          cursorColor: ColorsUtils.parseColorFromHexString(ColorsUtils.color3333),
                          keyboardType: TextInputType.phone,
                          style: StylesUtils.customTextStyle(
                              fontSize: 15.sp, color: ColorsUtils.color3333),
                          decoration: InputDecoration(
                            border: InputBorder.none,
                            focusedBorder: InputBorder.none,
                            hintText: '请输入联系手机',
                            contentPadding: EdgeInsets.symmetric(vertical: 15.h),
                            isCollapsed: true,
                            isDense: true,
                            hintStyle: StylesUtils.customTextStyle(
                                color: ColorsUtils.color9999, fontSize: 15.sp),
                          ),
                          onChanged: (String keyword) {
                            controller.mobile.value = keyword;
                          },
                        ),
                      ))
                    ],
                  ),
                )
              ],
            ),
          ),
          extendBody: true,
          bottomNavigationBar: SafeArea(
            bottom: true,
            child: Container(
              height: 60.h,
              alignment: Alignment.center,
              decoration: const BoxDecoration(color: Colors.white),
              child: FractionallySizedBox(
                  heightFactor: 0.75,
                  widthFactor: 0.9,
                  child: InkWell(
                    onTap: () {},
                    child: Container(
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(10.w),
                          gradient: LinearGradient(colors: [
                            ColorsUtils.rgba(52, 120, 246, 1),
                            ColorsUtils.rgba(2, 167, 240, 1)
                          ], stops: const [
                            0,
                            0.99
                          ], transform: GradientRotation(RadianUtils.angleToRadian(90)))),
                      alignment: Alignment.center,
                      child: Text(
                        '发送',
                        style: StylesUtils.customTextStyle(fontSize: 16.sp),
                      ),
                    ),
                  )),
            ),
          ),
        ));
  }

  Color activeColor(int index) {
    if (index == controller.tabIndex.value) {
      return ColorsUtils.rgba(52, 120, 246, 0.0470588);
    }
    return ColorsUtils.parseColorFromHexString(ColorsUtils.colorF7f7);
  }

  Border? activeBorder(int index) {
    if (index == controller.tabIndex.value) {
      return Border.all(color: ColorsUtils.rgba(52, 120, 246, 0.6));
    }
    return null;
  }

  BorderRadius? activeBorderRadius(int index) {
    if (index == controller.tabIndex.value) {
      return BorderRadius.circular(8.w);
    }
    return null;
  }
}
